<template>
    <div class="wrap" style="padding-top: 59px;">
        <h2 class="feedback text-center">意见与建议反馈</h2>
        <div class="feedback-content">
            <el-form :model="form" :rules="rules" ref="form" label-width="100px" class="form">
                <el-form-item label="反馈内容：" prop="f_content">
                    <el-input type="textarea" v-model="form.f_content" autocomplete="off" rows="10" maxlength="1000" placeholder="请简要描述您要反馈的意见或建议内容，最多可输入500字"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-upload ref="upload" :action="uploadUrl()" list-type="picture-card" multiple :http-request="uploadSectionFile" :on-remove="handleRemove" :on-change="uploadChange" :on-success="uploadSuccess">
                        <i class="el-icon-upload"></i>
                        <span class="el-upload__text">点击添加截图或图片，更好的进行补充说明<em>最大可上传8张</em></span>
                    </el-upload>
                </el-form-item>
                <el-form-item label="联系方式：">
                    <el-input v-model="form.f_phone" autocomplete="off" rows="10" maxlength="1000" placeholder="请输入您的联系方式, 手机/微信/QQ/邮箱等"></el-input>
                </el-form-item>
                <el-form-item class="text-center">
                    <el-button type="primary" class="btn-small" @click="submit('form')">提交</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script>
    export default {
        data(){
            return{
                form: {
                    f_content: '',
                    f_phone: '',
                    f_img: '',
                    f_uid: '',
                },
                rules: {
                    f_content: [
                        { required: true, message: '请输入反馈内容', trigger: 'blur' },
                    ],
                },
                fileUrllist: [],  //change   url数组
                filefIdList: [],  //上传成功  id数组
                fileAllUrlList: [],  //上传成功  url数组
            }
        },
        methods: {
            //提交表单
            submit(formName){

                var _this = this;
                _this.$refs[formName].validate((valid) => {
                    if (valid) {

                        _this.form.f_img = _this.filefIdList.join(',');
                        
                        this.$httpPost('/api/index/Feedback/addFeedBack',_this.form).then(response => {

                            if(response.code == 200){

                                this.$message({
                                    message: response.msg,
                                    type: 'success'
                                });

                            }else{
                                this.$message({
                                    message: response.msg,
                                    type: 'warning'
                                });
                            }

                        });

                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                })
            },
            uploadUrl(){
                let url = '/api/index/Feedback/uploadImgs';
                return url;
            },
            //自定义上传
            uploadSectionFile(file){
                
                var _this = this;

                const formData = new FormData();
                formData.append('files', file.file);
                formData.append('uid', _this.form.f_uid);
                
                this.$httpPost('/api/index/Feedback/uploadImgs',formData).then(response => {

                    if(response.code == 200){

                        this.$message({
                            message: response.msg,
                            type: 'success'
                        });
                        file.onSuccess(response.fid);

                    }else if(response.code == 301){
                        this.$message({
                            message: response.msg,
                            type: 'warning'
                        });
                        _this.$refs.upload.clearFiles();
                    }else{
                        this.$message({
                            message: response.msg,
                            type: 'warning'
                        });
                    }

                });
            },
            //移除
            handleRemove(file, fileList) {
                
                var _this = this;

                var sub = this.fileAllUrlList.indexOf(file.url);  //下标
                if(sub != -1){
                    //请求接口  删除文件
                    this.$httpPost('/api/index/Feedback/delFile',{'fid': this.filefIdList[sub]}).then(response => {

                        if(response.code == 200){

                            _this.fileAllUrlList.splice(sub,1);
                            _this.filefIdList.splice(sub,1);
                            
                        }else{
                            this.$message({
                                message: response.msg,
                                type: 'warning'
                            });
                        }

                    });
                }

            },
            //上传成功
            uploadSuccess(response, file, fileList){
                
                this.filefIdList = [];
                this.fileAllUrlList = [];
                for(var i=0;i<fileList.length;i++){
                    
                    this.filefIdList.push(fileList[i].response);
                    this.fileAllUrlList.push(fileList[i].url);
                }
                
            },
            //change
            uploadChange(file,fileList){
                
                this.fileUrllist = [];
                for(var i=0;i<fileList.length;i++){
                    this.fileUrllist.push(fileList[i].url);
                }
                
            },
        },
        mounted(){
            if(!window.localStorage.uid){
                this.form.f_uid = '';
            }else{
                this.form.f_uid = window.localStorage.uid;
            }
            
        },
    }
</script>
<style>
    .wrap{
        width: 625px;
        margin: 40px auto 20px;
    }
    .feedback{
        font-size: 21px;
        font-weight: 400;
    }
    .el-form-item__label{
        float: none;
    }
    .el-form-item__content{
        margin-left: 0px!important;
    }
    .el-upload--picture-card{
        width: 100%;
        height: 36px;
        line-height: 36px;
    }
    .el-upload--picture-card i{
        vertical-align: sub;
    }
    .el-upload__text{
        color: #d2d2d2;
    }
    .el-upload__text>em{
        color: red;
        font-style: normal;
        padding-left: 3px;
    }
    .el-button--primary{
        background: #409EFF;
        border-color: #409EFF;
    }
    .el-button--primary:focus, .el-button--primary:hover {
        background: #409EFF;
        border-color: #409EFF;
        color: #fff;
    }
    .btn-small{
        width: 260px;
        border-radius: 20px;
    }
    .feedback-content{
        padding-bottom: 70px;
    }
</style>

